<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <title>My HTML File</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,600,400italic,500italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
    <script src="bower_components/angular/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/site.js"></script>
</head>
<body ng-app="site" ng-controller="SiteController">
<div class="container_64">
    <img src="assets/masthead.png" class="indexIntro">
</div>
<div class="container_64 topicFormBase">
    <div class="grid_14 topicFormBase">
        <div class="grid_5 alignRight formLabel">Email</div>
        <div><input class="grid_8 floatRight" type="text" name="email" ng-model="email"></div>
    </div>
    <div class="grid_14 topicFormBase">
        <div class="grid_5 alignRight formLabel">Username</div>
        <div><input class="grid_8 floatRight" type="text" name="username" ng-model="username"></div>
    </div>
    <div class="grid_14 topicFormBase">
        <div class="grid_5 alignRight formLabel">Password</div>
        <div><input class="grid_8 floatRight" type="text" name="password" ng-model="password"></div>
    </div>
    <div class="grid_14 topicFormBase">
        <button class="floatRight topicFormBase" type="submit" ng-click="loginUser()">Login</button>
    </div>
</div>

<div class="container_64">
    <div class="indexIntro intro medium">
        <div class="padding20">
            Topic, derived from Greek, in current English means subject or item of learning; and the suffix -pedia means learning.<span class="introItalic medium">Topicopedia is learning of topics or topics of learning.</span></div>
    </div>
</div>


<div class="container_64">
    <div class="intro indexIntro medium alignCenter"><div class="padding20">Eight Categories</div></div>
    <div class="intro indexIntro medium alignCenter"><div class="padding20">Thousands of topics</div></div>
    <div class="intro indexIntro medium alignCenter"><div class="padding20">Answer questions</div></div>
</div>
<div class="container_64">
    <div class="indexIntro intro alignCenter"><div class="padding10">Build your body of knowledge. Create as an individual or group.</div></div>
</div>
<div class="container_64">
    <div class="grid_8"><img src="assets/artAndLit.png" title="Arts and Literature" ng-mouseover="showCategory(1)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/social.png" title="Social Science" ng-mouseover="showCategory(2)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/geography.png" title="Geography" ng-mouseover="showCategory(3)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/humanbody.png" title="Human Body and Health" ng-mouseover="showCategory(4)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/biosphere.png" title="Biosphere" ng-mouseover="showCategory(5)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/sciences.png" title="Sciences and Mathematics" ng-mouseover="showCategory(6)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/sports.png" title="Sports" ng-mouseover="showCategory(7)" ng-mouseleave="hideCategories()"></div>
    <div class="grid_8"><img src="assets/technology.png" title="Technology" ng-mouseover="showCategory(8)" ng-mouseleave="hideCategories()"></div>
</div>
<div class="container_64">
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId<1)"><div class="padding10">roll over the categories to read about them</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==1)"><div class="padding10">Writers, artists, books, stories, sculpture and lots more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==2)"><div class="padding10">History, politics, languages and more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==3)"><div class="padding10">Anatomy, organs, diseases, medicine and more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==4)"><div class="padding10">Earth, continents, weather and more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==5)"><div class="padding10">Animals, plants, environment, archaeology and more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==6)"><div class="padding10">Physics, chemistry, astronomy, mathematics and more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==7)"><div class="padding10">Hockey, football, cricket and lots more.</div></div>
    <div class="indexIntro introItalic medium alignCenter" ng-show="(showCategoryId==8)"><div class="padding10">Computers, cars, airplanes and more</div></div>
</div>
<div class="container_64">
    <div class="fullWidth">&NonBreakingSpace;</div>
</div>
<div class="container_64">
    <div class="intro indexIntro mediumSmall alignleft">
        <p class="mediumSmall"><b>For Children</b><br>
        Topicopedia is designed to be an easy way for children to create their own encyclopedia. There are lots of topics. Topicopedia is populated through simple and easy to use forms.<br>
        Their information is stored in one place and is accessible from anywhere, anytime and any platform They can even share it with friend s and classmates.<br>
        All account holders are parents (or adults) and children can not use the share feature without their approval and knowledge.</p>
        </div>
    <div class="intro indexIntro mediumSmall alignleft">
        <p class="mediumSmall"><b>For Groups</b><br>
        Groups of children can build their group knowledge by filling forms into a group account. Teachers or parents can review the pages and add comments.<br>
        Parents can choose to connect their child's account with another group's account, making it possible for their child to share their topics with the group.<br>
    </div>
    <div class="intro indexIntro mediumSmall alignleft">
        <p class="mediumSmall"><b>For Experts</b><br>
        Are you an expert in a subject? Or centre of information? Create a takeaway using Topicopedia - a topic created for your users.<br>
        Create and publish on the Topicopedia platform. Retain your audience! Extend your reach!</p>
    </div>
</div>
<div class="container_64">
    <div class="indexIntro introItalic medium alignRight"><a href="user.html#/home/5348024557502464">Click here to view the demo!</a></div>
</div>
<div class="container_64">
    <div class="fullWidth">&NonBreakingSpace;</div>
</div>
</body>
</html>